<template>
  <div>
    <a-space>
      <a-select
        ref="select"
        v-model:value="server2"
        style="width: 200px"
        @focus="focus"
        @change="handleChange"
      >
        <a-select-option value="server2">中心节点 172.28.158.99</a-select-option>
        <a-select-option value="server3">分布式节点A 172.28.158.130</a-select-option>
        <a-select-option value="server1">分布式节点B 172.28.158.98 </a-select-option>
      </a-select>
    </a-space>
    <v-chart v-if="showServer1" :option="getOption(dataNodes, dataLinks)" style="height: 800px" />
    <v-chart v-if="showServer2" :option="getOption(dataNodes, dataLinks)" style="height: 800px" />
    <v-chart v-if="showServer3" :option="getOption(dataNodes, dataLinks)" style="height: 800px" />
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import { getProcessApi } from '/@/api/topo/topo'
  const showServer1 = ref(false)
  const showServer2 = ref(false)
  const showServer3 = ref(false)
  const getOption = (data, links) => {
    return {
      ...option.value,
      series: [
        {
          ...option.value.series[0],
          data: data,
          links: links,
        },
      ],
    }
  }
  const showServer = (number) => {
    if (number == 1) {
      ;(showServer1.value = true), (showServer2.value = false), (showServer3.value = false)
    } else if (number == 2) {
      ;(showServer1.value = false), (showServer2.value = true), (showServer3.value = false)
    } else {
      ;(showServer1.value = false), (showServer2.value = false), (showServer3.value = true)
    }
  }
  //节点数据
  var dataNodes = ref([])
  //节点连接情况
  var dataLinks = ref([])
  //服务器进程数据
  var serverData = ref([])
  //基准圆点
  var o = { x: 0, y: 0 }
  //获取进程数据并进行数据处理
  async function getProcess(id) {
    const result = await getProcessApi({ number: id })
    /*     console.log(res)
    if (res.success != true) {
      console.log('error')
      return
    } */
    serverData.value = result
    serverData.value.forEach((node) => {
      if (!node.label) {
        node.label = {}
      }
      node.label.normal = {
        //align: 'inside',
        show: true,
        position: 'bottom',
        fontSize: '12',
      }
      if (node.name != '') {
        node.symbol = 'image://' + 'src/assets/images/process_open.png'
      } else {
        node.symbol = 'image://' + 'src/assets/images/process_close.png'
      }
    })
    // 总线图预览
    var bus = createBusNodeDatas(serverData.value, o)
    //console.log(bus)
    dataNodes.value = bus.dataNodes
    dataLinks.value = bus.dataLinks
    //console.log(dataLinks.value)
    //showServer1.value = true
    //console.log(list)
  }
  onMounted(async () => {
    await getProcess(1)
    showServer1.value = true
  })
  const server2 = ref('server2')
  const focus = () => {
    console.log('focus')
  }
  const handleChange = async (value) => {
    if (value == 'server1') {
      await getProcess(1)
      showServer(1)
    } else if (value == 'server2') {
      await getProcess(2)
      showServer(2)
    } else {
      await getProcess(3)
      showServer(3)
    }
  }
  function createBusNodeDatas(data_nodes, o) {
    var num = data_nodes.length
    //var nodeLen = 0
    var dataNodes = []
    var dataLinks = []
    var mockBus = []
    // 制作data假节点xy
    for (let i = 0; i < num; i++) {
      var x
      var y
      if (i > num / 2) {
        x = o.x + (num - i) * 200
        y = o.y + 400
      } else {
        x = o.x + i * 200 + 100
        y = o.y + 100
      }
      data_nodes[i].x = x
      data_nodes[i].y = y
      dataNodes.push(data_nodes[i])
      //nodeLen++
    }
    // 制作bus假节点
    for (let i = 0; i < num + 3; i++) {
      var x = o.x + i * 100
      var y = o.y + 250
      var node = {
        id: `busNode_${i}`,
        name: `busNode_${i}`,
        value: `busNode_${i}`,
        x: x,
        y: y,
        itemStyle: {
          opacity: 0,
        },
        symbolSize: 0,
        label: {
          normal: {
            show: true,
            position: 'bottom',
            fontSize: '12',
          },
        },
        symbol: 'image://' + '../../assets/images/process.png',
      }
      dataNodes.push(node)
      //console.log(dataNodes)
      mockBus.push(node)
    }
    // 连接各data和bus节点
    for (let j = 0; j < num + 3; j++) {
      // console.log(dataNodes[j], mockBus[j]);
      // console.log(mockBus.filter(i => i.x === dataNodes[j].x))
      var node = mockBus.filter((i) => i.x === dataNodes[j].x)[0].id
      if (j < data_nodes.length) {
        var dataLink = {
          source: `process_${j}`,
          target: node,
        }
        dataLinks.push(dataLink)
      }
      var busLink = {
        source: `busNode_${j}`,
        target: `busNode_${j + 1}`,
      }
      dataLinks.push(busLink)
    }
    var mockBusLen = mockBus.length
    var width = 200 * mockBusLen
    var height = 400
    return {
      dataNodes: dataNodes,
      dataLinks: dataLinks,
      width: width,
      height: height,
    }
  }
  // 图表内容，样式
  const option = ref({
    tooltip: {},
    series: [
      {
        type: 'graph',
        // layout: 'force',
        symbolSize: 30,
        // roam: true,
        focusNodeAdjacency: true,
        legend: {
          left: 'left',
          data: ['h1', 'h2', 'h3'],
        },
        edgeSymbol: ['circle'],
        edgeSymbolSize: [1, 1],
        edgeLabel: {
          normal: {
            show: false,
          },
          emphasis: {
            textStyle: {
              fontSize: 16,
            },
          },
        },
        force: {
          edgeLength: 100,
          gravity: 0,
        },
        //节点信息
        //data: dataNodes,
        //links: dataLinks,
        lineStyle: {
          curveness: 0,
        },
        zoom: 1.2,
      },
    ],
  })
</script>
